<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      div {
        display: inline-block;
        margin-right: 40px;
        margin-bottom: 40px;
        width: 100px;
        height: 100px;
        background-color: aquamarine;
      }

      .simple-shadow {
        box-shadow: 20px 20px #ddd;
      }

      .dim-shadow {
        box-shadow: 20px 20px 10px red;
      }

      .no-border {
        box-shadow: 0px 0px 10px red;
      }

      .diffuse-shadow {
        box-shadow: 10px 10px 10px 20px red;
      }

      .inset-shadow {
        box-shadow: inset 0px 0px 10px 20px red;
      }

      .box-shadows {
        /* 背景颜色为橘黄色 */
        background-color: orange;
        margin: 50px auto;
        /* 左上角和右下角圆半径为100px */
        border-radius: 100px 0px 100px 0px;
        border: 4px solid tomato;
        /* 红色阴影，红色里面的黄色影阴,最外面的黄色阴影 */
        box-shadow: 0px 0px 10px rgb(251, 9, 9), inset 0px 0px 20px yellow,
          0px 0px 10px 30px yellow;
      }
    </style>
  </head>
  <body>
    <!-- box-shadow: [inset] x偏移 Y偏移 [模糊半径] [扩散半径] 颜色; -->
    <!-- 
        注：
            []方括：表示这个值可以省略不写
            inset：表示内阴影，当需要设置内阴影时，才添加
            x 偏移：阴影在 x 轴（水平）方向偏移量 值为正，表示阴影向右偏移 值为负，表示阴影向左偏移
            y 偏移：阴影在 Y 轴（垂直）方向偏移量 值为正，表示阴影向下偏移 值为负，表示向阴影向上偏移
            模半径：值只能是 >=0 的值，表示阴影的模糊半径
            扩散半径：取正值时，阴影扩大；取负值时，阴影收缩。默认为 0，此时阴影与元素同样大。
            颜色：表示阴影的颜色
     -->

    <!--  简单阴影-->
    <div class="simple-shadow"></div>

    <!-- 模糊阴影 -->
    <div class="dim-shadow"></div>
    <div class="dim-shadow no-border"></div>

    <!-- 阴影展延 -->
    <div class="diffuse-shadow"></div>

    <!-- 内阴影 -->
    <div class="inset-shadow"></div>

    <!-- 多个阴影 -->
    <div class="box-shadows"></div>
  </body>
</html>
